<template>
    <div>
        <div class="handle-box">
             <el-button color="#23c6c8" class="handle-btn"  @click="exportAll">批量导出</el-button>
          </div>
         <el-table ref="multipleTableRef" 
            :header-cell-style="{color:'#2A62BC'}"
            :data="tableData"   
            style="width: 100%;" 
            size="small"
            border
            stripe 
            @selection-change="handleSelectionChange">
            <el-table-column   type="selection" width="35" />
            <el-table-column  prop="name" label="学生姓名"  align="center"></el-table-column>
            <el-table-column  label="学习进度" align="center" >
                    <template #default="scope">
                        <el-progress
                            :text-inside="true"
                            :stroke-width="20"
                            :percentage="scope.row.studyProgress"
                            status="success"
                            color="#0AB394"
                            striped                          
                            />
                    </template>
                </el-table-column>
            <el-table-column  label="作业进度" align="center" >
                    <template #default="scope">
                        <el-progress
                            :text-inside="true"
                            :stroke-width="20"
                            :percentage="scope.row.workProgress"
                            status="success"
                            color="#0AB394"
                            striped                          
                            />
                    </template>
                </el-table-column>
                <el-table-column label="操作"  align="center" >
                   <template #default="scope">
                      <el-row class="right-btn">
                        <el-tooltip content="查看详情" placement="bottom" effect="light">
                          <el-button   @click="lookDetail(scope.row)" >
                            <i class="iconfont icon-info_sign blue"></i>
                         </el-button>   
                        </el-tooltip>       
                        <el-tooltip content="导出个人学习数据" placement="bottom" effect="light">
                          <el-button   @click="exportOne(scope.row)" >
                            <i class="iconfont icon-import qi"></i>
                         </el-button>   
                        </el-tooltip>       
                      </el-row>
                   </template>
                </el-table-column>
            </el-table>
                <!-- 分页 -->
            <div class="pagination">
                    <el-pagination
                    :current-page="query.pageIndex"
                        :page-size="query.pageSize"
                        :page-sizes="[5, 10, 15, 20]"
                        :small="small"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pageTotal"
                        @size-change="handleSizeChange"
                        @current-change="handlePageChange"/>
                </div>
                
        </div>
    </template>
    
<script setup lang="ts">
    import { ref, reactive } from 'vue';
    import { getClazzInfo } from '../../../api/analysis';
    import { ElMessage, ElMessageBox } from 'element-plus';  
    import { useRouter } from 'vue-router';
    //数据目前暂时先用路由的跳转 后面需要调整
    const router  = useRouter()
    const lookDetail=(row)=>{
        console.log('-------lockl-----')
    router.push('/dataTable')
    } 
    //分页字体
    const small = ref(true)
    // const size = ref<'default' | 'large' | 'small'>('default')
    
    //分页数据
    const query = reactive({
        pageIndex: 1,
        pageSize: 5,
    });
    //表格数据
    const tableData = ref();
    //总页数
    const pageTotal = ref(0);
    const multipleTableRef = ref()
    const state = reactive({
       multipleSelection:[]
    })
    // 获取表格数据  分页是数据截取  后台结合一起后  直接返回分页的后的数据
    const getData = () => {
        getClazzInfo({pageCurrent:query.pageIndex,pageSize:query.pageSize}).then(res=>{
            console.log(res,"---res---")
            // tableData.value = res.data.
            let start  = (query.pageIndex-1)*query.pageSize;//开始位置
            let end =query.pageIndex*query.pageSize  ;//结束位置 数组的截取的时候 [start,end) suo所以不用-1
            tableData.value = res.data.slice(start,end);
            // tableData.value = res.data;
            pageTotal.value = res.data.length
        })
       
        
    };
    getData();
   //多选框权限
   const handleSelectionChange = (val) => {
      state.multipleSelection = val
    }
    // 分页导航
    const handleSizeChange = (val: number) => {
      // console.log(`${val} items per page`)
      query.pageSize = val;
      getData()
    }
    const handlePageChange = (val) => {
        query.pageIndex = val;
        console.log(val,"==")
        console.log(query.pageSize)
        getData()
    };
    
//批量导出 后续导出操作 在.then中进行 可查看element plus文档
const exportAll=()=>{
    ElMessageBox.confirm(
            '确认是否导出班级的所有信息?',
            '提示',
            {
            confirmButtonText: '确定',
            cancelButtonText: '关闭',
            }
        )
}
//查看详情
// const  lookDetail=(row)=>{

// }

//导出个人数据  后续导出操作 在.then中进行 可查看element plus文档
const exportOne=(row)=>{
    ElMessageBox.confirm(
            '是否导出该学生的个人数据?',
            '导出',
            {
            confirmButtonText: '确定导出',
            cancelButtonText: '取消',
            }
        )
}

</script >
<style lang="less" scoped>
 .handle-box {
       margin-bottom: 20px;   
       .handle-btn{
          margin-left: 8px;
          color: #fff;
       }    
    }
   .qi{
    color:#23C6C8;
   } 
   .right-btn{
        justify-content:center;
       .el-button{
          height: 33px;
          // width: 60px;
          margin-right: 10px;
          padding: 1px 5px;
       }
    }
    
  </style>